@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/swiper/swiper-bundle.min.css') }}">
@endpush

@section('content')
@include('layouts.includes.breadcrumb')
<!--主体区域-->
<div class="st-main">
    <div class="container">
        <div class="row" id="ST-PRODUCT-SHOW">
            @include('layouts.includes.productShow')
        </div>
    </div>
    <div class="st-h50"></div>
    <div class="container">
        <div class="st-main-detail">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#Details" role="tab" data-toggle="tab" class="bi-stickies"> @lang('Details')</a></li>
                @if(!empty($row->related_accessories_sku))
                <li role="presentation"><a href="#Accessories"role="tab" data-toggle="tab" class="bi-tools"> @lang('Accessories')</a></li>
                @endif
                <li role="presentation"><a href="#Delivery"role="tab" data-toggle="tab" class="bi-map"> @lang('Delivery & Tax')</a></li>
                <li role="presentation"><a href="#Returns" role="tab" data-toggle="tab" class="bi-bootstrap-reboot"> @lang('Returns')</a></li>
                <li role="presentation"><a href="#Reviews" role="tab" data-toggle="tab" class="bi-emoji-smile"> @lang('Reviews')</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div class="st-h10"></div>
                <div role="tabpanel" class="tab-pane active" id="Details">
                    @if(!empty($general_sepcs))
                    <table class="table table-striped">
                        <caption>@lang('Product specification')</caption>
                        <tbody>
                            @foreach($general_sepcs as $general_sepc)
                            <tr>
                                <th>{{$general_sepc['name']}}</th>
                                <td>{{$general_sepc['pivot']['spec_value']}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="st-h50"></div>
                    @endif
                    @if($row->details)
                        {!!$row->details!!}
                    @else
                        @foreach($row->asset_img_photos as $photo)
                        <img src="{{$photo['src']}}" alt="{{$row->title}}" class="img-responsive" />
                        @endforeach
                    @endif
                </div>
                @if(!empty($row->related_accessories_sku))
                <div role="tabpanel" class="tab-pane" id="Accessories">
                    <table class="table st-cart-table">
                        <tbody>
                            @foreach($row->related_accessories_sku as $related_accessory)
                            <tr>
                                <td>
                                    <div class="media">
                                        <div class="media-left">
                                            <a href="{{route('product.show', ['id'=>$related_accessory->id])}}">
                                                <img class="media-object" src="{{$related_accessory->img_cover}}" alt="{{$related_accessory->title}}" title="{{$related_accessory->title}}" />
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><a href="{{route('product.show', ['id'=>$related_accessory->id])}}">{{$related_accessory->title}}</a></h5>
                                            <p class="st-itemcode"> <small>@lang('Item code #'): {{$related_accessory->sku}}</small></p>
                                            <p class="st-price">
                                                {{$_current_currency_name}} {{$related_accessory->sale_price}} x 
                                                <input value="1" name='accNum' type="number" />
                                            </p>
                                        </div>
                                    </div>
                                </td>
                                <td class="st-wholesale hidden-xs">
                                    <table class="table">
                                        <tbody>
                                            @foreach($related_accessory->wholesale_set['num'] as $wholesale_num)
                                            <tr>
                                                <td>
                                                    @if($loop->last) <font>≥</font> @else <font>≥</font> @endif
                                                    {{$wholesale_num}}
                                                </td>
                                                <td>{{$_current_currency_name}} {{$related_accessory->wholesale_set['price'][$loop->index]}}</td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </td>
                                <td>
                                    <button onclick="Util.addtocart({{$related_accessory->id}}, $(this).parentsUntil('tr').siblings().find('input[name=accNum]').val());$(this).children('i').removeClass('bi-cart').addClass('bi-cart-fill');" class="btn btn-default btn-xs"> 
                                        <i class="bi-cart"></i> 
                                        <span class="hidden-xs">@lang('Add to cart')</span>
                                        <span class="visible-xs-inline">@lang('Add')</span>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
                <div role="tabpanel" class="tab-pane" id="Delivery">
                </div>
                <div role="tabpanel" class="tab-pane" id="Returns">
                </div>
                <div role="tabpanel" class="tab-pane" id="Reviews">
                    <iframe src="{{route('comment.list', ['product_id'=>$row->id,'sku'=>$row->sku,'spu'=>$row->spu,'no_header'=>1])}}" frameborder="0" scrolling="yes" style="width:100%;height: 800px;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts_bottom')
<script src="{{ asset('vendor/swiper/swiper-bundle.min.js') }}"></script>
<script>
!function () {
    var showToggleProductAjax = '{{config('strongshop.showToggleProductAjax')}}';
    //产品放大镜,移动端产品轮播
    renderProductPictures();
    
    /**
     * 规格提示
     * bootstrap3 - JavaScript 插件 - 工具提示 https://v3.bootcss.com/javascript/#tooltips
     */
    $('[data-toggle="tooltip"]').tooltip();
    
    //当前产品规格
    var specs = @json($price_sepcs);
    console.log('specs', specs);
    //获取当前产品规格值
    var currSpecs = [];
    for (x in specs)
    {
        currSpecs[x] = specs[x].pivot.spec_value;
    }
    currSpecs.sort();
    console.log('currSpecs', currSpecs);
    //spu产品规格
    var spuSpecs = @json($row->spu_specs);
    console.log('spu_specs', spuSpecs);
    //获取spu产品规格值
    var spuSpecsValues=[];
    for(x in spuSpecs){
        spuSpecsValues[x] = spuSpecs[x].spec_values.sort().toString();
    }
    console.log('spu_specs_values', spuSpecsValues);
    //如果当前产品规格大于等于2个 则 标记出全部的无效规格
    if(currSpecs.length >=2){
        markInvalidSpecAll(currSpecs);
    }
    //产品规格点击选择事件
    $(document).on('click', ".st-detail-attr > dl.st-attr > dd", function () {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(this).parent().removeClass('active');
            $(this).parent().parent().find("dl>dd").removeClass('st-invalid');
        } else {
            $(this).addClass('active').siblings('dd').removeClass('active');
            $(this).parent().addClass('active');
        }
        //获取已选规格
        var selectedSpecs = [],n=0;
        $(this).parent().parent().children("dl.st-attr").each(function () {
            var childActiveObj = $(this).children('dd.active');
            if(typeof(childActiveObj.attr('data-spec')) != "undefined"){
                selectedSpecs[n] = childActiveObj.attr('data-spec');
                n++;
                $(this).addClass('active');
            }else{
                $(this).removeClass('active');
            }
        });
        console.log('selectedSpecs', selectedSpecs);
        //如果还剩一种规格组未选 则 标记出该规格组无效的规格
        if((currSpecs.length-selectedSpecs.length) === 1){
            var markSpec = $(this).parent().parent().children("dl.st-attr:not(.active)").children('dd');
            markInvalidSpec(markSpec, selectedSpecs);
        }
        //如果规格还未全部选完
        if(selectedSpecs.length !== currSpecs.length){
            console.log('selectedSpecs.length !== currSpecs.length', selectedSpecs.length, currSpecs.length);
            return;
        }
        selectedSpecs.sort();
        console.log('selectedSpecs', selectedSpecs.length, selectedSpecs.toString());
        //如果所选规格和当前规格相同
        if (currSpecs.toString() === selectedSpecs.toString()) {
            console.log('所选规格和当前规格相同', currSpecs.toString(), selectedSpecs.toString());
            return;
        }
        //匹配所选规格
        for (x in spuSpecs)
        {
            if (selectedSpecs.toString() === spuSpecs[x].spec_values.sort().toString()) {
                //如果匹配到则重定向到该产品详情
                var url ='/product?id=' + spuSpecs[x].product_id;
                console.log('匹配到：',url);
                if(!showToggleProductAjax){
                    window.location.href = url;
                    return;
                }
                currSpecs = selectedSpecs;
                url += '&fetchHtml=1';
                layer.load(1);
                $.get(url, function(res){
                    layer.closeAll();
                    $("#ST-PRODUCT-SHOW").html(res.data.content);
                    if(currSpecs.length >=2){
                        markInvalidSpecAll(currSpecs);
                    }
                    renderProductPictures();
                });
                return;
            }
        }
        $(this).removeClass('active').addClass('st-invalid');
    });
    
    /**
     * 标记无效的规格
     * @param {type} obj 需要遍历匹配的规格对象
     * @param selectedSpecs 已选的规格数组
     */
    function markInvalidSpec(obj, selectedSpecs)
    {
        $(obj).each(function (i) {
            var dataSpecVal = $(this).attr('data-spec');
            selectedSpecs.push(dataSpecVal);
            selectedSpecs.sort();
            //匹配无效规格
            if(spuSpecsValues.includes(selectedSpecs.toString())){
                $(this).removeClass('st-invalid');
                console.log('Matching the spec:',dataSpecVal, selectedSpecs, 'valid 有效');
            }else{
                $(this).addClass('st-invalid');
                console.log('Matching the spec:',dataSpecVal, selectedSpecs, 'invalid 无效');
            }
            var indSpec = selectedSpecs.indexOf(dataSpecVal);
            selectedSpecs.splice(indSpec,1);
        });
    }
    /**
     * 标记出全部的无效规格
     */
    function markInvalidSpecAll(currSpecs)
    {
        for(var z=0; z < currSpecs.length; z++){
            var selectedSpecs = JSON.parse(JSON.stringify(currSpecs));
            var zValue = currSpecs[z];
            var zValueInd = selectedSpecs.indexOf(zValue);
            selectedSpecs.splice(zValueInd,1);
            console.log('selectedSpecs', selectedSpecs);
            var markSpec = $(".st-detail-attr>dl.st-attr>dd[data-spec='"+zValue+"']").parent().children('dd');
            markInvalidSpec(markSpec, selectedSpecs);
        }
    }
    function renderProductPictures()
    {
        //产品放大镜
        Util.zoomImage();
        //移动端产品轮播
        if(Util.isIE() === false){
            new Swiper('.swiper-container', {
                pagination: {
                    el: '.swiper-pagination'
                }
            });
        }
    }
}
();
</script>
@endpush